<template>
  <div class="navji">
    <div class="center">
      <ul class="center-box">
        <li class="center-box-li" @click="$router.push({ path: '/' })">首页</li>
        <!-- 目前隐藏下拉框内容，之后如果需要直接显示就可以用 -->
        <li
        class="center-box-li"
        v-for="(item, i) in titles"
        :key="i"
        @mouseenter="moen"
        @mouseleave="mole"
        >
          {{item.title}}
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li"
            v-for="(childrenItem, i) in item.children"
            :key="i"
            @click="clickNav(item.title, childrenItem.childrenTitle)">{{childrenItem.childrenTitle}}</li>
          </ul>
        </li>
        <!-- <li class="center-box-li">
          酒店
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li">豪华酒店</li>
            <li class="center-box-ul-li">经济酒店</li>
          </ul>
        </li>
        <li class="center-box-li">
          公寓
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li">豪华公寓</li>
            <li class="center-box-ul-li">经济公寓</li>
          </ul>
        </li>
        <li class="center-box-li">
          家装
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li">豪华家装</li>
            <li class="center-box-ul-li">经济家装</li>
          </ul>
        </li>
        <li class="center-box-li">
          门店
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li">豪华门店</li>
            <li class="center-box-ul-li">经济门店</li>
          </ul>
        </li>
        <li class="center-box-li">
          视频
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li">住宅视频</li>
            <li class="center-box-ul-li">别墅视频</li>
          </ul>
        </li>
        <li class="center-box-li">
          公司简介
          <img class="box-li-img" src="./img/bottom2x.png" alt="">
          <ul class="center-box-ul">
            <li class="center-box-ul-li">公司文化</li>
            <li class="center-box-ul-li">发展历程</li>
          </ul>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
import top from './img/top2x.png'
import bottom from './img/bottom2x.png'

export default {
    name: 'navji',
    data() {
      return {
        titles: [
          { title: "别墅", children: [
            { childrenTitle: "豪华别墅" },
            { childrenTitle: "经济别墅" }
          ] },
          { title: "酒店", children: [
            { childrenTitle: "豪华酒店" },
            { childrenTitle: "经济酒店" }
          ] },
          { title: "公寓", children: [
            { childrenTitle: "豪华公寓" },
            { childrenTitle: "经济公寓" }
          ] },
          { title: "家装", children: [
            { childrenTitle: "豪华家装" },
            { childrenTitle: "经济家装" }
          ] },
          { title: "门店", children: [
            { childrenTitle: "豪华门店" },
            { childrenTitle: "经济门店" }
          ] },
          { title: "视频", children: [
            { childrenTitle: "住宅视频" },
            { childrenTitle: "别墅视频" }
          ] },
          { title: "公司简介", children: [
            { childrenTitle: "公司文化" },
            { childrenTitle: "发展历程"  }
          ] },
        ]
      }
    },
    methods: {
      moen(e) {
        e.currentTarget.firstElementChild.src = top
      },
      mole(e) {
        e.currentTarget.firstElementChild.src = bottom
      },
      clickNav(fristTitle, twoTitle) {
        if (fristTitle == "视频") {
          this.$router.push({
          path: '/readMore',
          query: {
              fristTitle,
              twoTitle
            }
          })
        }
        this.$router.push({
          path: '/readMore',
          query: {
            fristTitle,
            twoTitle
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
.navji {
  background: $public-color;
  font-size: 18px;
  color: #FFFFFF;
  .center {
    width: 84%;
    margin: 0 auto;
    .center-box {
      display: flex;
      justify-content: space-around;
      height: 60px;
      line-height: 60px;
      .center-box-li:hover {
        background: #fff;
        color: $public-color;
        transition: all .3s;
      }
      .center-box-li:first-child {
        background: $public-color;
        color: #fff;
      }
      .center-box-li {
        width: 100%;
        text-align: center;
        cursor: pointer;
        z-index: 100;
        .center-box-ul {
          display: none;
          color: #252525;
          background: #fff;
        }
        .center-box-ul-li:hover {
          background: $public-color;
          color: #fff;
          transition: all .3s;
        }
        .box-li-img {
          width: 12px;
          height: 10px;
          vertical-align: middle;
        }
      }
      .center-box-li:hover .center-box-ul {
        display: block;
      }
    }
  }
}
</style>
